<template>
  <div class="homeCarouse">
    <div class="homeCarouseContent">
      <ElCarousel
        class="homeCarousel"
        :interval="1000"
        type="card"
        height="300px"
        indicator-position="none"
      >
        <ElCarouselItem v-for="Popular in PopularList.slice(0, 5)" :key="Popular.id">
          <div @click="toSongDetail(Popular)">
            <img class="carouselImg" :src="Popular.picUrl" />
          </div>
        </ElCarouselItem>
      </ElCarousel>
    </div>
  </div>
  <div class="homeSongList">
    <div class="homeSong" v-for="(cat, index) in CatList" :key="index">
      <a @click="toSongsheet(cat)">{{ cat.name }}</a>
    </div>
    <div class="homeSongOther">
      <a href="/songsheet">更多</a>
    </div>
  </div>
  <!-- 热门歌单开始 -->
  <div class="homePopularPlaylist">
    <div class="PopularPlayList">
      <div class="PopularPlayListTitle">
        <h2>热门歌单</h2>
        <a href="/songsheet">更多</a>
      </div>
      <div class="PopularPlayListName">
        <ElCarousel
          class="PopularPlayListCarousel"
          height="300px"
          :autoplay="false"
          indicator-position="none"
        >
          <ElCarouselItem v-for="dev in 2" :key="dev">
            <div v-if="dev == 1">
              <div
                class="PopularPlayListDev"
                v-for="Populars in PopularList.slice(0, 5)"
                :key="Populars.id"
              >
                <div class="PopularPlayListA" @click="toSongDetail(Populars)">
                  <div
                    class="PopularPlayListImg"
                    @mousemove="PopularShowIn(Populars)"
                    @mouseleave="PopularShowOut(Populars)"
                  >
                    <i class="iconfont" :class="Populars.isPopularShow ? 'actives' : ''">
                      &#xe7f1;
                    </i>
                    <img class="PopularPlayListPicture" :src="Populars.picUrl" alt="" />
                  </div>
                  <div class="PopularPlayListText">
                    {{ Populars.name }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div
                class="PopularPlayListDev"
                v-for="Populars in PopularList.slice(5, 10)"
                :key="Populars.id"
              >
                <div class="PopularPlayListA" @click="toSongDetail(Populars)">
                  <div
                    class="PopularPlayListImg"
                    @mousemove="PopularShowIn(Populars)"
                    @mouseleave="PopularShowOut(Populars)"
                  >
                    <i class="iconfont" :class="Populars.isPopularShow ? 'actives' : ''">
                      &#xe7f1;
                    </i>
                    <img class="PopularPlayListPicture" :src="Populars.picUrl" alt="" />
                  </div>
                  <div class="PopularPlayListText">
                    {{ Populars.name }}
                  </div>
                </div>
              </div>
            </div>
          </ElCarouselItem>
        </ElCarousel>
      </div>
    </div>
  </div>
  <!-- 热门歌单结束 -->
  <!--新歌首发  -->
  <div class="homeNewSone">
    <div class="homeNewSoneList">
      <div class="NewSoneTitle">
        <h2>新歌首发</h2>
        <a href="/album">更多</a>
      </div>
      <div class="NewSoneName">
        <ElCarousel
          class="NewSoneContent"
          height="300px"
          :autoplay="false"
          indicator-position="none"
        >
          <ElCarouselItem v-for="div in 2" :key="div">
            <div v-if="div == 1">
              <div
                class="NewSoneCart"
                v-for="song in songList.slice(0, 6)"
                :key="song.id"
              >
                <div class="NewSoneA" @click="toAlbum(song)">
                  <img class="NewSoneImg" :src="song.al.picUrl" alt="" />
                  <img class="NewSoneSin" src="../../img/f412d65.png" />
                  <h3 class="NewSoneText">{{ song.name }}</h3>
                  <h3 class="SoneSinger">{{ song.ar[0].name }}</h3>
                </div>
              </div>
            </div>
            <div v-if="div == 2">
              <div
                class="NewSoneCart"
                v-for="song in songList.slice(6, 12)"
                :key="song.id"
              >
                <div class="NewSoneA">
                  <img class="NewSoneImg" :src="song.al.picUrl" alt="" />
                  <img class="NewSoneSin" src="../../img/f412d65.png" />
                  <h3 class="NewSoneText">{{ song.name }}</h3>
                  <h3 class="SoneSinger">{{ song.ar[0].name }}</h3>
                </div>
              </div>
            </div>
          </ElCarouselItem>
        </ElCarousel>
      </div>
    </div>
  </div>
  <!--新歌首发 -->
  <!-- 热门歌手 -->
  <div class="homePopularSingers">
    <div class="homePopularSingersList">
      <div class="PopularSingersTitle">
        <h2>热门歌手</h2>
        <a href="/artlist">更多</a>
      </div>
      <div class="PopularSingersName">
        <div class="PopularSingersCart" v-for="singers in SingerList" :key="singers.id">
          <div class="PopularSingers" @click="toArtist(singers)">
            <div class="PopularSingerImg">
              <img class="PopularSingerPicture" :src="singers.picUrl" alt="" />
            </div>
            <div class="PopularSingerText">{{ singers.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 热门歌手 -->
  <!-- 精选视频 -->
  <div class="homeFeaturedVideo">
    <div class="FeaturedVideoList">
      <div class="FeaturedVideoListTitle">
        <h2>精选视频</h2>
        <a href="/mv">更多</a>
      </div>
      <div class="FeaturedVideoListName">
        <ElCarousel
          class="PopularPlayListCarousel"
          :autoplay="false"
          indicator-position="none"
        >
          <ElCarouselItem v-for="div in 2" :key="div">
            <div v-if="div == 1">
              <div
                class="FeaturedVideoListDev"
                v-for="Mv in MvList.slice(0, 4)"
                :key="Mv.artistId"
                @click="toMvDetail(Mv)"
              >
                <div
                  href="/songsheet"
                  class="FeaturedVideoListContent"
                  @mousemove="MvShowIn(Mv)"
                  @mouseleave="MvShowOut(Mv)"
                >
                  <i class="iconfont" :class="Mv.isMvShow ? 'actives' : ''"> &#xe7f1; </i>
                  <img class="FeaturedVideoListImg" :src="Mv.cover" alt="" />
                </div>
                <div class="FeaturedVideoSongName">{{ Mv.name }}</div>
                <div class="FeaturedVideoListSing">
                  <span class="FeaturedVideoSingName">{{ Mv.artistName }}</span>
                </div>
              </div>
            </div>
            <div v-if="div == 2">
              <div
                class="FeaturedVideoListDev"
                v-for="Mv in MvList.slice(4, 8)"
                :key="Mv.artistId"
                @click="toMvDetail(Mv)"
              >
                <div
                  href="/songsheet"
                  class="FeaturedVideoListContent"
                  @mousemove="MvShowIn(Mv)"
                  @mouseleave="MvShowOut(Mv)"
                >
                  <i class="iconfont" :class="Mv.isMvShow ? 'actives' : ''"> &#xe7f1; </i>
                  <img class="FeaturedVideoListImg" :src="Mv.cover" alt="" />
                </div>
                <div class="FeaturedVideoSongName">{{ Mv.name }}</div>
                <div class="FeaturedVideoListSing">
                  <span class="FeaturedVideoSingName">{{ Mv.artistName }}</span>
                </div>
              </div>
            </div>
          </ElCarouselItem>
        </ElCarousel>
      </div>
    </div>
  </div>
  <!-- 精选视频 -->
  <Live></Live>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Home",
});
</script>

<script lang="ts" setup>
import { onMounted, ref } from "@vue/runtime-core";
import { ElCarousel, ElCarouselItem } from "element-plus";
import Live from "../../components/Live/index.vue";
import {
  getSongSheet,
  getSong,
  getSinger,
  getMvId,
  getCatList,
} from "../../api/Home/Home";
import router from "../../routers";

const PopularList = ref([]);
const songList = ref([]);
const SingerList = ref([]);
const MvList = ref([]);
const CatList = ref([]);
// const MvUrl = ref();
//获取歌单分类
onMounted(async () => {
  const res = await getCatList();
  // console.log(res);
  CatList.value = res.data.sub.slice(0, 11);
  console.log(CatList.value);
});
//跳转到歌单页面
const toSongsheet = (CatList) => {
  const name = CatList.name;
  router.push({
    name: "Songsheet",
    params: {
      name,
    },
  });
};
//获取歌单
onMounted(async () => {
  const res = await getSongSheet();
  // console.log(res);
  PopularList.value = res.data.result.slice(0, 10);
  // console.log(PopularList.value);
  // console.log(roleList);
});
//跳转到歌单详情页
const toSongDetail = (PopularList) => {
  const id = PopularList.id;
  router.push({
    name: "SongDetail",
    params: {
      id,
    },
  });
};
//获取歌曲
onMounted(async () => {
  const res = await getSong();
  songList.value = res.data.data.dailySongs.slice(7, 19);
  // console.log(songList.value);
});
//跳转到歌曲页面
const toAlbum = (songList) => {
  const id = songList.id;
  router.push({
    name: "Album",
    params: {
      id,
    },
  });
};
//显示歌单图标的播放效果
const PopularShowIn = (PopularList) => {
  PopularList.isPopularShow = true;
  // console.log(PopularList);
  // console.log(1, PopularList.isPopularShow);
};
const PopularShowOut = (PopularList) => {
  PopularList.isPopularShow = false;
  // console.log(2, PopularList.isPopularShow);
};
//获取歌手
onMounted(async () => {
  const res = await getSinger();
  SingerList.value = res.data.artists.slice(0, 6);
  // console.log(SingerList.value);
});
//跳转到歌手页面
const toArtist = (SingerList) => {
  const id = SingerList.id;
  router.push({
    name: "Artlist",
    params: {
      id,
    },
  });
};
//获取MvId
onMounted(async () => {
  const res = await getMvId();
  MvList.value = await res.data.data;
  // console.log(MvList.value);
});
//显示隐藏Mv视频播放图标
const MvShowIn = (MvList) => {
  MvList.isMvShow = true;
};
const MvShowOut = (MvList) => {
  MvList.isMvShow = false;
};
//跳转到Mv视频的页面
const toMvDetail = (MvList) => {
  const id = MvList.id;
  router.push({
    name: "Mv",
    params: {
      id,
    },
  });
};
</script>
<style scoped>
.el-carousel__item a {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.homeCarouse {
  height: 300px;
}
.homeCarouseContent {
  width: 1200px;
  margin: 30px 160px;
}
.carouselImg {
  width: 100%;
  height: 300px;
}
.homeCarousel .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.homeCarousel .el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 歌单开始 */
.homeSongList {
  margin: 30px 160px;
  height: 40px;
}
.homeSongList a {
  line-height: 40px;
  text-decoration: none;
  color: #606266;
}
.homeSong {
  float: left;
  height: 40px;
  cursor: pointer;
}
.homeSong a {
  float: left;
  padding: 0 29px;
  margin-right: 10px;
  text-align: center;
  background-color: #f8f8f8;
  font-size: 14px;
  border-radius: 30px;
}
.homeSongOther a {
  float: right;
  padding: 0;
}
/* 歌单结束 */
/* 公共组件 */
.PopularPlayList,
.homeNewSoneList,
.homePopularSingersList,
.FeaturedVideoList {
  margin: 30px 160px;
}
.PopularPlayListTitle h2,
.NewSoneTitle h2,
.PopularSingersTitle h2,
.FeaturedVideoListTitle h2 {
  color: #000000;
  font-weight: unset;
  font-size: 28px;
  float: left;
  line-height: 28px;
  margin: 0;
}
.PopularPlayListTitle a,
.NewSoneTitle a,
.PopularSingersTitle a,
.FeaturedVideoListTitle a {
  color: #606266;
  float: right;
  text-decoration: none;
  line-height: 28px;
  text-align: center;
}
/* 热门歌单开始 */
.homePopularPlaylist {
  height: 389px;
}
/* .PopularPlayList{
    margin:30px 160px;;
} */
.PopularPlayListTitle {
  height: 28px;
}
.PopularPlayListName {
  width: 1200px;
  height: 356px;
}
.PopularPlayListDev {
  float: left;
  margin: 25px 8px;
  width: 224px;
  height: 228px;
  box-sizing: border-box;
}
.PopularPlayListA {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.PopularPlayListImg {
  position: relative;
  width: 224px;
  height: 224px;
  overflow: hidden;
}
.PopularPlayListPicture {
  width: 100%;
  height: 100%;
  transform: all 1s;
}
.PopularPlayListPicture:hover {
  transform: scale(1.1);
}
.PopularPlayListText {
  position: absolute;
  left: -1px;
  top: 223px;
  line-height: 32px;
  height: 35px;
  width: 230px;
  margin-bottom: 0;
  display: inline-block;
  font-weight: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 热门歌单结束 */
/* 新歌首发开始 */
.homeNewSone {
  height: 374px;
}

.NewSoneTitle {
  height: 28px;
  padding-bottom: 30px;
}

.NewSoneName {
  height: 1200px;
  height: 316px;
}
/* .NewSoneContent{
    display: flex;
} */
.NewSoneCart {
  float: left;
  margin: 10px 0;
  padding: 0 10px;
  width: 387px;
  height: 120px;
  box-sizing: border-box;
}
.NewSoneA {
  position: relative;
  display: block;
  width: 378px;
  height: 120px;
  background-color: #f7f8f9;
  cursor: pointer;
}
.NewSoneImg {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 0;
  left: 0;
  z-index: 2;
}
.NewSoneSin {
  position: absolute;
  left: 30px;
  top: 5px;
  width: 110px;
  height: 110px;
  z-index: 1;
}
.NewSoneText {
  position: absolute;
  left: 150px;
  top: 30px;
  line-height: 15px;
  height: 20px;
  padding: 0 36px;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.SoneSinger {
  position: absolute;
  left: 150px;
  font-size: 14px;
  top: 45px;
  line-height: 20px;
  height: 26px;
  margin: 0;
  margin-top: 5px;
  padding: 0 36px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.NewSoneImg:hover ~ .NewSoneSin {
  left: 40px;
}
.NewSoneSin:hover {
  left: 40px;
}
.NewSoneA:hover .NewSoneText {
  color: red;
}
/* 新歌首发结束 */
/* 热门歌手开始 */
.homePopularSingers {
  height: 292px;
}
.PopularSingersTitle {
  height: 28px;
  padding-bottom: 30px;
}
.PopularSingersCart {
  float: left;
  padding: 0 11px;
  box-sizing: border-box;
}
.PopularSingers {
  margin: 20px 0;
  height: 214px;
  cursor: pointer;
}
.PopularSingerImg {
  height: 175px;
  width: 175px;
  border-radius: 50%;
  overflow: hidden;
}
.PopularSingerPicture {
  border-radius: 50%;
  height: 100%;
  width: 100%;
  transition: all 1s;
}
.PopularSingerPicture:hover {
  transform: scale(1.1);
}
.PopularSingerText {
  text-align: center;
  margin-top: 15px;
}
/* 热门歌手结束 */
/* 精选视频开始*/
.homeFeaturedVideo {
  height: 349px;
  margin-top: 70px;
}
.FeaturedVideoListTitle {
  height: 28px;
}
.FeaturedVideoListName {
  height: 260px;
}
.FeaturedVideoListDev {
  float: left;
  margin: 55px 5px;
  height: 229px;
  width: 285px;
  cursor: pointer;
}
.FeaturedVideoListContent {
  position: relative;
  height: 160px;
  width: 285px;
  overflow: hidden;
}
.FeaturedVideoListImg {
  height: 100%;
  width: 100%;
  transform: all 1s;
}
.FeaturedVideoListImg:hover {
  transform: scale(1.1);
}
.FeaturedVideoSongName {
  margin-top: 18px;
}
.FeaturedVideoListSing {
  margin-top: 6px;
  font-size: 14px;
  color: #909399;
}
/* 精选视频结束*/
/* 图标 */
@font-face {
  font-family: "iconfont"; /* Project id 2952620 */
  src: url("//at.alicdn.com/t/font_2952620_uq5aucdd1qj.woff2?t=1638502117682")
      format("woff2"),
    url("//at.alicdn.com/t/font_2952620_uq5aucdd1qj.woff?t=1638502117682") format("woff"),
    url("//at.alicdn.com/t/font_2952620_uq5aucdd1qj.ttf?t=1638502117682")
      format("truetype");
}
</style>
<style scoped lang="less">
.PopularPlayListImg {
  .iconfont {
    display: none;
    position: absolute;
    font-size: 50px;
    top: 90px;
    left: 90px;
    color: white;
    z-index: 999;
  }
  .actives {
    display: block;
  }
}
.FeaturedVideoListContent {
  .iconfont {
    display: none;
    position: absolute;
    font-size: 50px;
    top: 55px;
    left: 110px;
    z-index: 999;
  }
  .actives {
    display: block;
  }
}
</style>
